<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .inset {
      width: 200px;
      height: 100px;
      background-color: #4ccbcd;
      /*
          10px 50px 20px 100px 表示元素上右下左四个方向向内的偏移量
          round 10px 表示被裁剪的矩形四个角的圆角半径大小为 10px
          */
      clip-path: inset(10px 50px 20px 100px round 10px);
    }
  </style>
  
  <body>
    <!-- 
        TIP
        CSS clip-path属性值inset()函数 用于将一个元素或图片裁剪成一个矩形。

        TIP
        偏移量：表示元素上右下左四个方向向内的偏移量。他的写法和内边距 padding 写法一样，支持一个、两个、三个、四个值的写法（具体如何写，看下面示例）
        圆角半径：是一个可选参数，表示被裁剪的矩形四个角的圆角半径大小，写法是 round 后面跟圆半径值，圆半径值也支持一个、两个、三个、四个值的写法（具体如何写，看下面示例）
    -->

    <div class="inset"></div>
  </body>
</html>